/*
 * @Author: luoqi
 * @Date: 2022-03-30 11:21:18
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-08 15:58:56
 * @Description: 
 */
import React, { useState } from 'react';
import { Button, Modal,Descriptions, Badge  } from 'antd';

//代付订单详情
const Detailsagency = (props) => {
let {data}=props
  //模态框
  const [isModalVisible, setIsModalVisible] = useState(false);
  //模态框
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  return (
    <div>
      <Button type="primary" size="small" onClick={showModal}>查看</Button>
      <Modal title="代付订单详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} mask={false} footer={null} width={1000} >
        <Descriptions bordered>
          <Descriptions.Item label="系统订单号">{data.dingDanId}</Descriptions.Item>
          <Descriptions.Item label="商户订单号">{data.dingDanId}</Descriptions.Item>
          <Descriptions.Item label="商户名称" >张三</Descriptions.Item>
          <Descriptions.Item label="持卡人姓名"> {data.chiKaName}</Descriptions.Item>
          <Descriptions.Item label="银行名称">{data.yinHangName}</Descriptions.Item>
          <Descriptions.Item label="银行卡号" >{data.yinHangKaHao}</Descriptions.Item>
          
          <Descriptions.Item label="手续费" >{data.feiLvMoney}</Descriptions.Item>
          <Descriptions.Item label="实付金额" span={2}>{data.kouChuJinE}</Descriptions.Item>
          <Descriptions.Item label="订单状态" span={2}>{data.daiFuZhuangTai}</Descriptions.Item>
          <Descriptions.Item label="商户备注">代付1242424</Descriptions.Item>
          <Descriptions.Item label="系统备注" span={2}></Descriptions.Item>
          <Descriptions.Item label="代付时间">{data.caoZuoShiJian}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
        </Descriptions>
        <div  style={{margin:'20px auto',width:'50px'}}>
          <Button type='primary' onClick={handleOk}>确定</Button>
        </div>
        
      </Modal>
    </div>
  );
}

export default Detailsagency;
